<template>
  <view class="add-evidence-container">
    <view class="h-[20rpx]"></view>
    <uni-forms :modelValue="formData" label-width="140rpx">
      <view class="bg-white px-[30rpx] py-[20rpx] box-border">
        <uni-forms-item
          label="案件编号"
          name="content"
          required
          label-width="160rpx"
        >
          <uni-data-picker
            v-model="formData.content"
            :localdata="items"
            popup-title="案件编号"
          ></uni-data-picker>
        </uni-forms-item>
      </view>
      <view class="bg-white px-[30rpx] py-[20rpx] box-border mt-[20rpx]">
        <uni-forms-item label="证据名称" name="phone">
          <uni-easyinput
            type="text"
            v-model="formData.phone"
            placeholder="请输入证据名称"
            :inputBorder="false"
            :placeholderStyle="{ color: '#999', fontSize: '28rpx' }"
            primaryColor="#c0c4cc"
          />
        </uni-forms-item>
        <view class="gap-line"></view>
        <uni-forms-item
          label="证据内容"
          name="content"
          style="flex-direction: column"
        >
          <uni-easyinput
            type="textarea"
            placeholder="请填写意见描述"
            :inputBorder="false"
            :placeholderStyle="{ color: '#999', fontSize: '28rpx' }"
            :maxlength="100"
            @input="updateCount"
          />
          <view class="count">
            <text class="totalCount">{{ totalCount }}/</text>
            <text>100</text>
          </view>
        </uni-forms-item>
      </view>
      <view class="px-[30rpx] py-[20rpx] box-border mt-[10rpx]">
        <uni-file-picker
          v-model="formData.file"
          file-mediatype="image"
          mode="grid"
          file-extname="png,jpg,gif"
          :limit="9"
          @progress="progress"
          @success="success"
          @fail="fail"
          @select="select"
        />
      </view>
    </uni-forms>
    <view class="px-[30rpx] pt-[40rpx] box-border">
      <button
        hover-class="none"
        class="bg-[#1E92F0] color-white text-[30rpx] rounded-[48rpx] h-[98rpx] leading-[98rpx]"
        :disabled="isDisabled"
        @click="onSubmit"
      >
        提交证据
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from "vue";

const isDisabled = ref(false);
const data = reactive({
  formData: {
    phone: undefined,
    evidenceName: undefined,
    content: undefined,
    file: undefined,
  },
  rules: {
    // 对name字段进行必填验证
    name: [
      {
        required: true,
        errorMessage: "请填写姓名",
      },
      // 对name字段进行长度验证
      {
        minLength: 3,
        maxLength: 5,
        errorMessage: "{label}长度在 {minLength} 到 {maxLength} 个字符",
      },
    ],
  },
  items: [
    {
      text: "一年级",
      value: "1-0",
      children: [
        {
          text: "1.1班",
          value: "1-1",
        },
        {
          text: "1.2班",
          value: "1-2",
        },
      ],
    },
    {
      text: "二年级",
      value: "2-0",
    },
    {
      text: "三年级",
      value: "3-0",
    },
  ],
});
const { formData, rules, items } = toRefs(data);
// 初始化加载
onMounted(() => {});

let totalCount = ref(0);
const updateCount = (e: any) => {
  totalCount.value = e.length;
};
const onSubmit = () => {
  uni.redirectTo({
    url: "/subPages/result/index?mark=1",
  });
};
</script>

<style lang="scss" scoped>
.add-evidence-container {
  :deep(.uni-forms-item) {
    margin-bottom: 0;
  }
  .gap-line {
    margin-top: 20rpx;
    margin-bottom: 20rpx;
    border-bottom: 1rpx solid #e8e9ec;
  }
  :deep(.uni-forms-item__label) {
    font-size: 28rpx;
    color: #333;
  }
  :deep(.input-value-border) {
    border: none;
  }
  :deep(.placeholder) {
    font-size: 28rpx;
    color: #999;
  }
  :deep(.file-picker__box-content) {
    background: #fff;
    border-radius: 20rpx 20rpx 20rpx 20rpx !important;
    border: none !important;
  }
  :deep(.icon-add) {
    background-color: #1e92f0;
    border-radius: 10rpx;
  }
  :deep(.uni-progress-bar) {
    background-color: #fff;
  }
  :deep(.uni-easyinput__content-textarea) {
    height: 250rpx;
  }
  :deep(.uni-textarea-wrapper) {
    height: 250rpx !important;
  }
  .count {
    position: absolute;
    font-size: 22rpx;
    color: #333;
    right: 30rpx;
    bottom: 30rpx;
    .totalCount {
      color: #999;
    }
  }
}
</style>
